refactor: consolidate charts with BarChart component#7223
Open
talissoncosta wants to merge 4 commits intomainfrom
Open
refactor: consolidate charts with BarChart component#7223talissoncosta wants to merge 4 commits intomainfrom
talissoncosta wants to merge 4 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
github-actions
Bot
added
front-end
3 tasks
talissoncosta
force-pushed
the
feat/feature-analytics-6067
branch
2 times, most recently
from
8ce136f to
0ec66cd
Compare
…rts SCSS Replaces the two raw-recharts consumers with the shared <BarChart /> component introduced in #7215. Both pages keep their behaviour and visual contract; the JSX collapses substantially. BarChart API additions to support these consumers: - `barSize?: number` — fixed bar width in pixels (OrganisationUsage uses 14px to fit four series per day comfortably) - `verticalGrid?: boolean` (default true) — toggles CartesianGrid's vertical lines (legacy charts hide them) Migrations: - OrganisationUsage.container.tsx (4 metric series stacked, custom display labels via seriesLabels, selection-driven series filter, pre-formatted day axis) - SingleSDKLabelsChart.tsx (per-SDK stacked, palette colour map passed in from parent, MultiSelect-driven SDK filter) - OrganisationUsageMetrics.container.tsx — pre-formats day to 'D MMM' (matches the new chart-side day-as-display-string contract), switches userAgentColorMap from Map to Record (consistent with BarChart's prop after #7215) Cleanup: - Delete web/styles/3rdParty/_recharts.scss entirely — its rules existed solely to style the two legacy charts' tooltips. With both consumers migrated, no consumer of recharts global classNames remains; the new BarChart's ChartTooltip uses Bootstrap utilities + semantic token classes directly. Drop the @import too. - SingleSDKLabelsChart loses unused props (`metricKey`, `colours`) that the migration made redundant. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
talissoncosta
force-pushed
the
refactor/consolidate-charts-with-barchart
branch
from
1444d90 to
27debb5
Compare
AggregateUsageDataItem has `number | null` fields; ChartDataPoint expects `number`. Explicitly coalesce nulls to 0 in the mapping instead of bypassing with a type assertion. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replaces the bare "No usage recorded." text with the reusable EmptyState component (icon + title + description) — consistent with the Feature Analytics chart empty state pattern. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Show the EmptyState component instead of rendering an empty chart with bare axes when there's no SDK data. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.
Once credits are available, reopen this pull request to trigger a review.
Contributor
Docker builds report
|
Contributor
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
|
talissoncosta
changed the title
Contributor
Visual Regression16 screenshots compared. See report for details. |
This was referenced Apr 23, 2026
talissoncosta
added a commit
that referenced
this pull request
Apr 23, 2026
Previously, <PieChart> used Recharts' default <Tooltip> with a formatter. After _recharts.scss is deleted (#7223), the default tooltip renders with Recharts' built-in styles (white background, dark text) — stylistically jarring in dark mode where the rest of the chart reads on a dark surface. Switch <PieChart> to use the shared <ChartTooltip> for theme consistency across all three chart components (Bar, Line, Pie). ChartTooltip changes: - Add hideTotal prop (default false). PieChart passes hideTotal because a single-slice hover makes "Total: X" redundant with the slice value. - Conditionally render the label header — pies don't have an x-axis label, so the header is skipped for them. - Read entry.name with fallback to entry.dataKey so pie-slice names resolve correctly without breaking bar/line tooltips (where name === dataKey by default). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes
Contributes to #6889. Follow-up to #7215 — migrates two more raw-recharts consumers to the shared
<BarChart />component.Progress on #6889 after this lands: #7215 handled
FeatureAnalytics.tsx, this PR handlesOrganisationUsage.container.tsx+SingleSDKLabelsChart.tsx. The remaining two files (UsageTrendsChart.tsxandExperimentResultsTab.tsx), plusReleasePipelineStatsTable.tsx(a net-new raw-recharts consumer not in the original issue inventory), are addressed in #7328 — which closes #6889 on merge.Migrated
OrganisationUsage<BarChart>call. UsesseriesLabelsfor display names,MetricDataKeytypedRecordfor compile-time key completeness. Null metric values coalesced to 0.SingleSDKLabelsChart<BarChart>withshowLegend.OrganisationUsageMetrics'D MMM', switchesMap→Record<string, string>, removes unused props.BarChart API additions
barSize?: number— fixed bar width (OrganisationUsage uses 14px)verticalGrid?: boolean— toggles vertical grid lines (defaulttrue)Empty states
Both charts now use the
EmptyStatecomponent instead of bare text or empty axes — consistent with the Feature Analytics pattern from #7215.Cleanup
web/styles/3rdParty/_recharts.scss— legacy tooltip rules +.dark {}block no longer needed@import "recharts"from_index.scssVisual comparison
Expected: no visual changes on the chart itself. Empty states are improved.
How did you test this code?